import React, { Component } from 'react';
import {Link} from 'react-router-dom'
// import { HashRouter} from 'react-router-dom'


// import {store,components} from "../../store/index"

import "../../static/css/nav.css"


class Nav extends Component{
    constructor(props) {
       super(props);
       this.state  = {
           tabs:[
               {tabName:"首页",id:1,url:"/dynamic"},
               {tabName:"经验总结",id:2,url:"/experience"},
               {tabName:"小种子",id:3,url:"/lifeRecord"},
               {tabName:"小酷炫",id:4,url:"/cool"}
           ],
           currentIndex:1,
       }
    }
    changeTabs = (index)=>{
       this.setState({
           currentIndex:index.id
       })
    };
    componentWillReceiveProps(nextProps) {


    }
    componentDidMount(){
        const url = window.location.pathname;
        for (let vl of this.state.tabs) {
            if(vl.url === url){
                this.setState({
                    currentIndex:vl.id
                });
                break;
            }
        }
    }
    render() {
        let navs = this.state.tabs.map((a)=>{
            let cls = (this.state.currentIndex === a.id ? "site-navbar-set" : "");
            return  <li onClick={this.changeTabs.bind(this,a)} key={a.id} className={"site-navbar " + cls}>
                <Link className={"hover-gree"} to={a.url}>{a.tabName}</Link>
            </li>
        });
        return (
            <section>
               <ul className="header-nav">
                   {navs}
               </ul>
            </section>
        );
    }
}



export default Nav;
